13 WebSocket 基础原理与入门案例

WebSocket 基础原理与入门案例

关联：索引

要解决的问题

章节内容（本讲核心）：

与前置知识衔接（避免重复）：

  1. 场景提问：

1. WebSocket 核心定义与价值

2. WebSocket 握手流程（核心重点）

WebSocket 依赖 HTTP 完成 “协议升级”，全程基于 TCP 连接，核心步骤：

  1. 客户端发起升级请求：

浏览器发送 HTTP GET 请求，携带关键头信息：

  1. 服务端验证并响应：

服务端验证 Sec-WebSocket-Key 后，返回 HTTP 101 状态码（Switching Protocols），携带：

  1. 协议切换完成：

此后通信不再遵循 HTTP 规则，改用 WebSocket 帧结构传输数据。

3. WebSocket 帧结构（简化版）

无需深入二进制细节，核心理解：

4. WebSocket vs HTTP（核心对比）

维度 HTTP WebSocket
连接类型 短连接（请求 - 响应后断开） 长连接（一次握手持续通信）
通信方向 单向（客户端请求→服务端响应） 全双工（双向同时通信）
触发方式 客户端主动发起 客户端 / 服务端均可主动推送
数据开销 每次带完整 HTTP 头 仅帧头（极小开销）
适用场景 非实时请求（如页面加载） 实时通信（如聊天、监控）

1. AI 提示词模板（原理讲解）

请用“结构化分点 + 通俗举例”的方式讲解 WebSocket 核心原理，包含：
1. 握手流程（分步骤说明，标注关键 HTTP 头）；
2. 帧结构的核心组成（不用讲二进制，只说作用）；
3. 与 HTTP 的核心差异（用表格对比）；
4. 举 1 个实时聊天场景的应用例子，说明 WebSocket 如何解决 HTTP 的痛点。
要求：语言通俗，避免专业术语堆砌，适合前端入门学习者理解。

2. 学生任务：

  1. 回顾：WebSocket 客户端（浏览器）有哪些核心 API？（new WebSocket()、onopen、onmessage 等）

1. 技术栈说明

2. 示例项目结构（建议）

建议将示例项目拆成两个目录：一个放服务端（FastAPI），一个放前端（Vite + Vue3 + TS），结构如下（按此创建即可）：

websocket-demo/
├─ server/
│  └─ app.py
└─ client/
   └─ websocket-demo/
      ├─ index.html
      ├─ package.json
      ├─ tsconfig.json
      ├─ vite.config.ts
      └─ src/
         ├─ main.ts
         └─ components/
            └─ WebSocketDemo.vue

3. 步骤 1：服务端实现（FastAPI + Python）

# app.py
from fastapi import FastAPI, WebSocket
import uvicorn

app = FastAPI()

@app.websocket("/ws")
async def ws_endpoint(websocket: WebSocket):
    await websocket.accept()
    try:
        while True:
            text = await websocket.receive_text()
            await websocket.send_text(f"服务端已收到：{text}")
    except Exception:
        pass

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)

4. 步骤 2：客户端实现（Vue 3 + TypeScript）

<!-- src/components/WebSocketDemo.vue -->
<template>
  <div>
    <h3>WebSocket 消息收发</h3>
    <input v-model="msg" type="text" placeholder="输入消息" />
    <button @click="send">发送</button>
    <div style="margin-top: 20px; white-space: pre-line;">{{ logs }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';

const logs = ref('');
const msg = ref('');
let ws: WebSocket | null = null;

function log(content: string) {
  logs.value += `${content}\n`;
}

function send() {
  const text = msg.value.trim();
  if (!text) return alert('请输入消息');
  if (!ws || ws.readyState !== WebSocket.OPEN) {
    alert('连接尚未建立');
    return;
  }
  ws.send(text);
  log(`📤 客户端发送：${text}`);
  msg.value = '';
}

onMounted(() => {
  ws = new WebSocket('ws://localhost:8000/ws');
  ws.onopen = () => log('✅ 连接成功，可发送消息');
  ws.onmessage = (event) => log(`📥 服务端回复：${event.data}`);
  ws.onclose = () => log('❌ 连接已关闭');
  ws.onerror = (event) => {
    log('❌ 连接错误');
    console.error(event);
  };
});

onBeforeUnmount(() => {
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.close();
  }
});
</script>

// src/main.ts
import { createApp } from 'vue';
import WebSocketDemo from './components/WebSocketDemo.vue';

createApp(WebSocketDemo).mount('#app');

文件路径：client/websocket-demo/index.html

<!-- index.html -->
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>WebSocket 基础 Demo</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

5. 运行与联调步骤（学生必做）

  1. 服务端依赖：在 server 目录执行 python -m venv venv && venv\Scripts\activate && pip install fastapi uvicorn；
  2. 启动服务端：python app.py（或 uvicorn app:app --host 0.0.0.0 --port 8000）；
  3. 客户端项目：在 client 目录执行 npm create vite@latest websocket-demo -- --template vue-ts；
  4. 进入项目并启动：cd websocket-demo && npm install && npm run dev；
  5. 打开浏览器：访问本地开发地址（如 http://localhost:5173）后进行测试：

6. AI 辅助代码生成（可选）

提示词模板：

请生成“Vue 3 + TypeScript 客户端 + FastAPI/Python 服务端”的最简 WebSocket 通信 Demo，要求：
1. 客户端用 Vue 3 + TS + Vite，提供 src/components/WebSocketDemo.vue、src/main.ts、index.html；
2. 服务端用 FastAPI 提供 app.py，路径 /ws，监听 8000 端口，实现消息回显；
3. 覆盖核心事件：onopen/onmessage/onclose/onerror；
4. 输出“文件路径 + 完整代码 + 运行步骤”，确保可直接运行。
测试点 验证方式 预期结果
连接建立 启动服务端后打开客户端 客户端日志显示 “连接成功”
消息发送 输入消息点击发送 服务端控制台打印消息，客户端显示发送日志
消息接收 服务端回显消息 客户端日志显示服务端回复
连接关闭 关闭客户端页面 服务端控制台显示 “连接关闭”
异常处理 关闭服务端后客户端发送消息 客户端日志显示 “连接错误 / 关闭”

2. 学生任务：

1. 小结

2. 作业布置（需提交）

  1. 开发任务：实现可运行的 WebSocket 基础通信 Demo（客户端 + 服务端）；
  2. 验证任务：截图 “连接成功、消息发送、消息接收、连接关闭”4 个关键界面；
  3. 理论任务：撰写 200 字原理说明，简述 WebSocket 通信原理与 HTTP 的核心区别；
  4. 提交要求（仅提交 1 个 PDF 文件）：

工程化落地补充（可选）